<template>
  <div class="main">
    <div class="amount-box">
      <div class="input">
        <el-input placeholder="请输入住院号" v-model="code">
          <el-button type="primary" slot="append" @click="next">确认</el-button>
        </el-input>
      </div>
      <div class="keybord-items">
        <div class="keybord-item" v-for="item in keyList" :key="item" @click="inputHandler(item)">
          <span>{{item}}</span>
        </div>
        <div class="keybord-item" @click="backHandler()">
          <i class="el-icon-back"></i>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component } from 'vue-property-decorator'
import { mixins } from 'vue-class-component'
import ReservationMixin from '@/mixins/reservation'
import { IPatient } from '@/interface/common'

@Component
export default class InputCode extends mixins(ReservationMixin) {
  private code = ''
  private amountList: number[] = [10, 20, 30, 50, 100, 200, 300, 500, 1000, 2000, 5000, 10000]
  private keyList: any[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 'x', 0]

  private async created () {
    this.setTip('输入住院号')
    this.setMaxTime(60)
    this.updateTimeHandler('home')
  }

  private next () {
    const code = this.code
    if (this.code.length < 5) {
      this.$messageBox.show({ content: '住院号错误' })
      return
    }
    const patient : IPatient = {
      CardNo: code,
      Name: code
    }
    this.store.commit('updatePatient', patient)
    this.store.commit('setBusy', true)
    this.store.commit('updateInHosNo', code)
    this.store.state.bizType = '签到'
    this.clearTimeout()
    this.navigateTo(`/${this.getRoute()}/room`)
  }

  private inputHandler (key : string) {
    this.code = (`${this.code.trim()}${key}`).trim()
  }

  private backHandler () {
    if (this.code.trim().length > 0) {
      this.code = this.code.slice(0, this.code.length - 1)
    }
  }
}
</script>
<style>
  .el-input-group{
    height: 60px;
  }
  .el-button--primary {
      color: #FFF !important;
      background-color: #409EFF !important;
      border-color: #409EFF !important;
      height: 60px;
      font-size: 22px !important;
  }
  .el-input__inner{
    height: 60px;
    font-size:22px;
  }
  .el-button{
    border-radius: 0 4px 4px 0;
    padding: 18px 20px;
    font-size: 22px;
  }
</style>

<style scoped>
  .main {
    display: flex;
    height: 100%;
    justify-content: center;
    align-items: center;
  }
  .main-tip{
    font-size: 2rem;
    margin: 1rem;
  }
  .amount-box{
    background: #FFF;
    padding: 20px;
    box-shadow: 0px 2px 6px 1px rgba(0, 0, 0, 0.3);
    height: 540px;
    margin: 10px;
    width: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .amount-items{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 40rem;
  }
  .amount-item{
    width: 10rem;
    height: 10rem;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    background: #409EFF;
    margin: 1rem;
    font-size:2rem;
    border-radius: 5px;
    box-shadow: 0px 2px 6px 1px rgba(0, 0, 0, 0.3);
  }

  .keybord-items{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 30rem;
  }
  .keybord-item{
    width: 8rem;
    height: 8rem;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #333;
    background: #eee;
    margin: 1rem;
    font-size:2rem;
    border-radius: 5px;
    box-shadow: 0px 2px 6px 1px rgba(0, 0, 0, 0.3);
  }
  .amount-unit{
    font-size: 1rem;
  }
  .input{
    width: 400px;
    margin: 15px 0;
  }
</style>
